<template>
	<!-- 绑定支付宝 -->
	<view class="bindAlipay">
		<view class="form re">
			<view class="username"><input placeholder="请输入支付宝账号" type="text" maxlength="20" v-model="cardId" placeholder-style="color: #333333;" />
			<text class="now_bind" v-if="userinfo.alipay && userinfo.alipay !== ''">已绑定</text>
			</view>
			<view class="code"><input placeholder="请输入账号对应收款人姓名" type="text" maxlength="8" @input="setName" @blur="getName" placeholder-style="color: #333333;" :value="name" /></view>
			<view class="btn" @tap="submit" :style="{ background: newColor.color }">确认提交</view>
		</view>
	</view>
</template>

<script>
import {getUserInfo} from '../../../static/utils/ahth.js'
export default {
	data() {
		return {
			name: '',
			cardId: '',
			userinfo:getUserInfo()
		};
	},
	created() {
		if(this.userinfo.alipay && this.userinfo.alipay !== ''){
			this.cardId =  this.userinfo.alipay
			this.name = this.userinfo.ali_name
		}
	},
	onLoad() {},
	methods: {
		setName(e){ //姓名只能是中文
			console.log(e)
			let data = e.detail.value
			let newdata = data.replace(/[^\u4e00-\u9fa5]/g,'')
			setTimeout(() => { this.name = newdata }, 0)
			return newdata
		},
		getName(e){
			this.name = e.detail.value
		},
		submit() {
			setTimeout(()=>{
				if (this.cardId == '') {
					uni.showToast({
						title: '支付宝账号不能为空',
						icon: 'none'
					});
					return;
				} else if (this.name == '') {
					uni.showToast({
						title: '收款人不能为空',
						icon: 'none'
					});
					return;
				}
				this.bindAlipay()
			}, 200)
		},
		bindAlipay() {
			let that = this
			uni.showModal({
				title: '提示',
				content: '请仔细确认您的支付宝账号无误!',
				success: function(res) {
					if (res.confirm) {
						uni.showLoading({
							title:'提交中...'
						})
						that.request('user/bindAlipay', {
							alipay: that.cardId,
							ali_name: that.name
						}).then(res=>{
							console.log(res)
							if(res.code == 200){
								uni.hideLoading()
								uni.showToast({
									title:'绑定成功!'
								})
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			
		}
	}
};
</script>

<style lang="scss" scoped>
.bindAlipay {
	overflow: hidden;
	background-color: #ffffff;
	padding-bottom: 50upx;
}
.form {
	overflow: hidden;
	margin-top: 40upx;
	.username,
	.code {
		height: 80upx;
		padding: 20upx 30upx;
		border-bottom: 1upx solid #f2f2f2;
		box-sizing: content-box;
		position: relative;
		input {
			float: left;
			height: 80upx;
			line-height: 80upx;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			width: 400upx;
		}
		.get-code {
			width: 170upx;
			height: 56upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 30upx;
			float: right;
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			line-height: 56upx;
			margin-top: 15upx;
		}
	}
}
.btn {
	width: 500upx;
	height: 76upx;
	background: rgba(242, 58, 58, 1);
	border-radius: 38upx;
	font-size: 32upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	line-height: 76upx;
	margin: 0 auto;
	margin-top: 150upx;
}
.now_bind{
		height: 40upx;
		font-size: 22upx;
		background-color: #F2F2F2;
		color: #999;
		position: absolute;
		border-radius: 15upx;
		top: 50%;
		transform: translateY(-50%);
		padding: 5upx 20upx;
		line-height: 40upx;
		right: 30upx;
	}
</style>
